@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Rubik+Bubbles&display=swap');


*,
*::after,
*::before {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
}


body {
          background:radial-gradient(circle at top left, #1c1c1c, #000);;
          overflow: hidden;

}

header {
          position: absolute;
          width: 100vw;
          z-index: 9999;
          padding: 0 0;
          top: 10px;
          left: 0;
          height: 7vh;


}

#logo {
          width: min(100px,20vw);
}

header nav {
          width: 90vw;
          margin: 0 auto;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
}

header ul {
          display: flex;
          list-style: none;
          align-items: center;
}

header ul a {
          font-family: "Poppi", sans-serif;
          transition: 1s;
          text-decoration: none;
          color: #ffff;
          text-transform: uppercase;
          padding: 0 1.5rem;
          font-weight: 300;
          font-size: min(2vw,1em);
}

header ul a:hover {
          transition: 200ms;
          color: #f98322;
}

header ul a img {
          width: 10px;
}

.icon {
          height: 20px;

}

#icons {
          display: flex;
          justify-content: center;
          padding: 3px;
}

.icon:hover {
          border-radius: 50px;
          background-color: #818181;
}